<template>
	<div class="bianjishangpin">
    <div v-if="!shoujiban">
      <left></left>
      <div class="right">
        <div style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;" class="flexbc">
          <div class="flexcc fanhui" @click="back">
            <div><i class="el-icon-arrow-left" style="margin-right: 5px;"></i></div>
            <div>返回</div>
          </div>
          <top></top>
        </div>
        <div style="padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">

          <div class="flexc" style="font-size: 16px; font-weight: bold; margin-bottom: 20px;">
            <div><img src="../../../static/img/bianji1.png" style="width: 22px; margin-right: 10px;"></div>
            <div>编辑商品信息</div>
          </div>

          <el-form ref="form" :model="form">
            <div class="baibeijing" style="width: 780px;">
                <el-form-item>
                  <div class="flexc">
                    <div v-if="!shangpinyeshow">
                      <div>商品名称</div>
                      <div><el-input v-model="form.title" style="width: 360px;"></el-input></div>
                    </div>
                    <div v-if="shangpinyeshow">
                      <div>商品名称</div>
                      <div><el-input v-model="form.sale_name" style="width: 360px;"></el-input></div>
                    </div>
                    <div v-if="shangpinyeshow && $route.query.one"  style="margin-left: 20px;">
                      <div>页面名称（订单来源）</div>
                      <div><el-input v-model="form.page_source" style="width: 360px;" ></el-input></div>
                    </div>
                  </div>
                </el-form-item>


                <el-form-item>
                  <div class="flexc">
                    <div style="margin-right: 20px;">
                      <div>注意点</div>
                      <div><el-input v-model="form.points" style="width: 360px;"></el-input></div>
                    </div>
                    <div  v-if="shangpinyeshow">
                      <div>下单名称</div>
                      <div><el-input v-model="form.order_button" style="width: 360px;"></el-input></div>
                    </div>
                  </div>

                </el-form-item>
                <el-form-item>
                  <div>卖点</div>
                  <div class="flex">
                    <div><el-input v-model="form.selling_point[0]" style="width: 160px; margin-right: 10px;"></el-input></div>
                    <div><el-input v-model="form.selling_point[1]" style="width: 160px; margin-right: 10px;"></el-input></div>
                    <div><el-input v-model="form.selling_point[2]" style="width: 160px; margin-right: 10px;"></el-input></div>
                    <div><el-input v-model="form.selling_point[3]" style="width: 160px; margin-right: 10px;"></el-input></div>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div>月租</div>
                  <div><el-input v-model="form.yuezu" style="width: 360px;" ></el-input></div>
                </el-form-item>
                <el-form-item>
                  <div>通话时长</div>
                  <div><el-input v-model="form.yuyin" style="width: 360px;"></el-input></div>
                </el-form-item>
                <el-form-item>
                  <div>通用流量</div>
                  <div><el-input v-model="form.liuliang" style="width: 360px;"></el-input></div>
                </el-form-item>
                <el-form-item>
                  <div>定向流量</div>
                  <div><el-input v-model="form.dx_liuliang" style="width: 360px;">缺</el-input></div>
                </el-form-item>
                <div class="flex">
                  <el-form-item style="margin-right: 20px;">
                    <div>商品主图</div>
                    <div><chuantu :widths="'200px'" :heights="'200px'" :widths2="'200px'" :heights2="'200px'" :imgs="form.image1" @getimg="getimg" v-if="relo"></chuantu></div>
                  </el-form-item>
                  <el-form-item>
                    <div>商品分享图</div>
                    <div><chuantu :widths="'200px'" :heights="'200px'" :widths2="'200px'" :heights2="'200px'" :imgs="form.share_img" @getimg="getimg2" v-if="relo"></chuantu></div>
                  </el-form-item>
                </div>
                <el-form-item>
                  <div class="flexc">
                    <div style="margin-right: 20px;">入网协议展示</div>
                    <div><el-switch v-model="form.pact_have" style="width: 46px; height: 21px;" active-color="rgb(0, 90, 255);" inactive-color="rgb(246, 248, 251);" :active-value="1" :inactive-value="0"></el-switch></div>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="flexc">
                    <el-select v-model="form.pact_ids" multiple filterable collapse-tags style="width: 360px;" placeholder="请选择协议">
                     <el-option  :label="item.title" :value="item.id.toString()" v-for="item in xieyilist" :key="item.id"> </el-option>
                    </el-select>
                    <div style="margin: 0 20px; color:rgb(0, 90, 255) ; cursor: pointer;" @click="go('/xieyi')">管理协议</div>

                    <div style="margin-right: 10px;">用户端默认勾选</div>
                    <div><el-checkbox v-model="form.pact_check"  :true-label="1" :false-label="0"></el-checkbox></div>
                    <div>
                      <el-tooltip class="item" effect="dark" content="使用默认勾选后用户下单时无需再点击勾选,此操作不合规,请谨慎使用" placement="top-start">
                          <div><i class="el-icon-question" style="color: rgb(255, 168, 168); margin-left: 10px; font-size: 20px; position: relative; top: 3px;"></i></div>
                      </el-tooltip>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div>商品详情</div>
                  <div><fuwenben :content="form.description" @getcontent="getcontent" v-if="relo"></fuwenben></div>
                </el-form-item>
            </div>
            <!-- 商品页专用 -->
            <div v-if="shangpinyeshow">
              <div class="flexc" style="font-size: 16px; font-weight: bold; margin-bottom: 20px; margin-top: 30px;">
                <div><img src="../../../static/img/bianji1.png" style="width: 22px; margin-right: 10px;"></div>
                <div>商品下单信息填写配置</div>
              </div>
              <div class="baibeijing" style="width: 780px;">
                <el-form-item>
                  <div class="flex">
                    <div style="width: 210px;">身份证信息填写</div>
                    <div><el-switch v-model="form.need_idcard" @change="changeneed_idcard()" style="width: 46px; height: 21px;" active-color="rgb(0, 90, 255);" inactive-color="rgb(246, 248, 251);" :active-value="1" :inactive-value="0"></el-switch></div>
                  </div>
                </el-form-item>

                <el-form-item>
                  <div class="flexc">
                    <div style="width: 210px;">收货人使用身份证姓名</div>
                    <div><el-switch v-model="form.same_name" :disabled="form.need_idcard == 0" style="width: 46px; height: 21px;" active-color="rgb(0, 90, 255);" inactive-color="rgb(246, 248, 251);" :active-value="1" :inactive-value="0"></el-switch></div>
                    <div style="color: rgb(175, 179, 188); margin-left: 10px;">提示：开启身份证信息填写后可用</div>
                    <!-- <div class="flexcc">
                      <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
                          <div><i class="el-icon-question" style="color: rgb(255, 168, 168); margin-left: 10px; font-size: 20px; position: relative; top: 3px;"></i></div>
                      </el-tooltip>
                    </div> -->
                  </div>
                </el-form-item>

                <el-form-item>
                  <div class="flexc">
                    <div style="width: 210px;">身份证照片上传</div>
                    <div><el-switch v-model="form.is_need_photo" style="width: 46px; height: 21px;" active-color="rgb(0, 90, 255);" inactive-color="rgb(246, 248, 251);" :active-value="1" :inactive-value="0"></el-switch></div>
                    <div style="color: rgb(175, 179, 188); margin-left: 10px;">提示：检测到当前选择的商品需要照片</div>
                  </div>
                </el-form-item>

                <el-form-item>
                  <div class="flex">
                    <div style="width: 210px;">提单信息填写展示方式</div>

                    <div class="flexc">
                      <!-- <div class="flexc">
                        <el-radio v-model="form.show_type" :label="0" style="margin-right: 0;">逐渐显示填写信息</el-radio>
                        <div class="flexcc">
                          <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
                              <div><i class="el-icon-question" style="color: rgb(255, 168, 168); margin-left: 10px; font-size: 20px; position: relative; top: 3px;"></i></div>
                          </el-tooltip>
                        </div>
                      </div> -->
                      <div class="flexc" style="margin-left: 20px;">
                        <el-radio v-model="form.show_type" :label="1" style="margin-right: 0;">直接列出全部填写信息</el-radio>
                        <!-- <div class="flexcc">
                          <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
                              <div><i class="el-icon-question" style="color: rgb(255, 168, 168); margin-left: 10px; font-size: 20px; position: relative; top: 3px;"></i></div>
                          </el-tooltip>
                        </div> -->
                      </div>
                    </div>
                  </div>
                </el-form-item>
              </div>

              <div class="flexc" style="font-size: 16px; font-weight: bold; margin-bottom: 20px; margin-top: 30px;">
                <div><img src="../../../static/img/bianji1.png" style="width: 22px; margin-right: 10px;"></div>
                <div>用户下单限制设置</div>
              </div>

              <div class="baibeijing" style="width: 780px;">
                <el-form-item>
                  <div class="flex">
                    <div style="margin-right: 20px;">下单年龄限制</div>
                    <div><el-switch v-model="form.age_limit" style="width: 46px; height: 21px;" active-color="rgb(0, 90, 255);" inactive-color="rgb(246, 248, 251);" :active-value="1" :inactive-value="0"></el-switch></div>
                  </div>
                  <div class="flexc">
                    <div style="margin-right: 20px;  color: rgb(212, 215, 222);">允许下单的年龄范围</div>
                    <div><el-input v-model="form.min_age" style="width: 140px;" ></el-input></div>
                    <div style="margin: 0 10px;">~</div>
                    <div><el-input v-model="form.max_age" style="width: 140px;" ></el-input></div>
                  </div>
                </el-form-item>

                <el-form-item style="margin-top: 10px;">
                  <div class="flex">
                    <div style="margin-right: 20px;">下单数量限制</div>
                    <div><el-switch v-model="form.limit_open" style="width: 46px; height: 21px;" active-color="rgb(0, 90, 255);" inactive-color="rgb(246, 248, 251);" :active-value="1" :inactive-value="0"></el-switch></div>
                  </div>
                  <div class="flex">
                    <div class="flexc">
                      <div style="width: 100px; color: rgb(212, 215, 222);">选择限制数量</div>
                      <div>
                        <el-select v-model="form.limit" style="width: 100%;" placeholder="请选择限制数量">
                         <el-option  label="不限制" value="0"> </el-option>
                         <el-option  label="1" value="1"> </el-option>
                         <el-option  label="2" value="2"> </el-option>
                         <el-option  label="3" value="3"> </el-option>
                         <el-option  label="4" value="4"> </el-option>
                         <el-option  label="5" value="5"> </el-option>
                        </el-select>
                      </div>
                    </div>
                    <div class="flexc">
                      <div style="width: 100px; color: rgb(212, 215, 222); margin-left: 30px;">识别方式选择</div>
                      <div>
                        <el-select v-model="form.limit_type" style="width: 100%;" placeholder="请选识别方式选择">
                          <el-option  label="证件号" :value="0"> </el-option>
                          <el-option  label="手机号" :value="1"> </el-option>
                          <el-option  label="IP地址" :value="2"> </el-option>
                        </el-select>
                      </div>
                    </div>
                  </div>

                  <div style="margin-bottom: 20px;">
                    <div>不发货地区设置</div>
                    <div>
                      <div class="flexc" style="padding-bottom: 20px;">
                        <!-- <div style="margin-right: 20px;"><el-radio v-model="form.bufahuodiqu" label="2">使用产品的不发货区域</el-radio></div> -->
                        <div style="margin-right: 20px;"><el-radio v-model="form.deliver_type" :label="1">设置不发货区域</el-radio></div>
                        <div><el-radio v-model="form.deliver_type" :label="3">设置只发货区域</el-radio></div>
                      </div>
                      <div style="background: rgb(241, 241, 241); padding-bottom: 20px;" v-if="form.deliver_type == 1">
                        <div style="color: #999; font-size: 12px; padding: 10px 23px;">设置后用户只能选择选中的省市为收货地址</div>
                        <div style="padding-left: 23px;">
                            <el-cascader :options="options" v-model="form.nodeliver_area" style="width: 400ox;" collapse-tags :props="props" clearable>
                            </el-cascader>
                        </div>
                      </div>
                      <div style="background: rgb(241, 241, 241); padding-bottom: 20px;" v-if="form.deliver_type == 3">
                        <div style="color: #999; font-size: 12px; padding: 10px 23px;">设置后用户不能选择选中的省市为收货地址</div>
                        <div style="padding-left: 23px;">
                            <el-cascader ref="test" :options="options" v-model="form.deliver_area" style="width: 400ox;" collapse-tags :props="props" clearable @change="test" >
                            </el-cascader>
                        </div>
                      </div>
                      <div style=" background: rgb(241, 241, 241); padding:0 20px;"  v-if="form.deliver_type == 3">
                        <div class="flexc">
                          <div style="line-height: 32px;">批量上传地址</div>
                          <div style="margin-left: 10px;">
                            <el-upload :show-file-list="false" action="#" :http-request="upup">
                              <el-button type="text">点击上传</el-button>
                            </el-upload>
                          </div>
                          <el-button type="text" @click="down" style="margin-left: 50px;">模板下载</el-button>
                        </div>

                      </div>

                    </div>
                  </div>
                </el-form-item>

              </div>

            </div>


            <el-button type="primary" round style="margin: 44px 0;" @click="xiugai">保存</el-button>
          </el-form>
			<!-- <footers></footers> -->
        </div>

      </div>
    </div>






    <div v-if="shoujiban" style=" color: rgb(2, 12, 29); font-size: 0.24rem; background: #f6f8fb; padding-top: 1rem;">
      <topandleft></topandleft>
      <div style="background: #fff; padding: 0.3rem;">
        <div class="flexc" style="margin-bottom: 0.3rem;">
          <div style="width: 2px; height: 0.2rem; background: rgb(2, 12, 29); margin-right: 10px; overflow: hidden;"></div>
          <div style="font-size: 0.36rem; font-weight: bold;">商品管理</div>
        </div>
        <div class="flexc" style="margin-bottom: 0.3rem;">
          <div style="color: rgb(175, 179, 188);">首页</div>
          <div style="margin: 0 0.2rem;color: rgb(175, 179, 188);">·</div>
          <div style="color: rgb(175, 179, 188);">商品管理</div>
          <div style="margin: 0 0.2rem;color: rgb(175, 179, 188);">·</div>
          <div>编辑商品</div>
        </div>
      </div>


      <div style="padding: 0.3rem;">
        <div style="background: #fff; padding: 0.2rem; border-radius: 0.2rem;">
          <el-form ref="form" :model="form">
            <div v-if="!shangpinyeshow">
              <div style="margin: 0.1rem 0;">请输入商品名称</div>
              <div><el-input v-model="form.title" style="width: 100%;" placeholder="请输入商品名称"></el-input></div>
            </div>
            <div v-if="shangpinyeshow">
              <div style="margin: 0.1rem 0;">请输入商品名称</div>
              <div><el-input v-model="form.sale_name" style="width: 100%;" placeholder="请输入商品名称"></el-input></div>
            </div>
            <div v-if="shangpinyeshow && $route.query.one">
              <div  style="margin: 0.1rem 0;">请输入页面名称（订单来源）</div>
              <div><el-input v-model="form.page_source" style="width: 100%;" placeholder="请输入页面名称（订单来源）"></el-input></div>
            </div>
            <div>
              <div style="margin: 0.1rem 0;">注意点</div>
              <div><el-input v-model="form.points" style="width: 100%;" placeholder="请输入注意点"></el-input></div>
            </div>
            <div  v-if="shangpinyeshow">
              <div style="margin: 0.1rem 0;">下单名称</div>
              <div><el-input v-model="form.order_button" style="width: 100%;" placeholder="请输入下单名称"></el-input></div>
            </div>

            <div>
              <div style="margin: 0.1rem 0;">卖点</div>
              <div class="flexbc" style="width: 100%;">
                <div style="width: 45%;"><el-input v-model="form.selling_point[0]" style="margin-bottom: 0.1rem; width: 100%;" placeholder="请输入卖点1"></el-input></div>
                <div style="width: 45%;"><el-input v-model="form.selling_point[1]" style="margin-bottom: 0.1rem; width: 100%;" placeholder="请输入卖点2"></el-input></div>
                <div style="width: 45%;"><el-input v-model="form.selling_point[2]" style="margin-bottom: 0.1rem; width: 100%;" placeholder="请输入卖点3"></el-input></div>
                <div style="width: 45%;"><el-input v-model="form.selling_point[3]" style="margin-bottom: 0.1rem; width: 100%;" placeholder="请输入卖点4"></el-input></div>
              </div>
            </div>
            <div>
              <div style="margin: 0.1rem 0;">月租</div>
              <div><el-input v-model="form.yuezu" style="width: 100%;" placeholder="请输入月租"></el-input></div>
            </div>
            <div>
              <div style="margin: 0.1rem 0;">通话时长</div>
              <div><el-input v-model="form.yuyin" style="width: 100%;" placeholder="请输入通话时长"></el-input></div>
            </div>
            <div>
              <div style="margin: 0.1rem 0;">通用流量</div>
              <div><el-input v-model="form.liuliang" style="width: 100%;" placeholder="请输入通用流量"></el-input></div>
            </div>
            <div>
              <div style="margin: 0.1rem 0;">定向流量</div>
              <div><el-input v-model="form.dx_liuliang" style="width: 100%;" placeholder="请输入定向流量"></el-input></div>
            </div>
            <div class="flex">
              <div>
                <div style="margin: 0.1rem 0;">商品主图</div>
                <div><chuantu :widths="'200px'" :heights="'200px'" :widths2="'200px'" :heights2="'200px'" :imgs="form.image1" @getimg="getimg" v-if="relo"></chuantu></div>
              </div>
              <div>
                <div style="margin: 0.1rem 0;">商品分享图</div>
                <div><chuantu :widths="'200px'" :heights="'200px'" :widths2="'200px'" :heights2="'200px'" :imgs="form.share_img" @getimg="getimg2" v-if="relo"></chuantu></div>
              </div>
            </div>
            <div>
              <div class="flexc"  style="margin: 0.1rem 0;">
                <div>入网协议展示</div>
                <div><el-switch v-model="form.pact_have" style="width: 46px; height: 21px;" active-color="rgb(0, 90, 255);" inactive-color="rgb(246, 248, 251);" :active-value="1" :inactive-value="0"></el-switch></div>
              </div>
            </div>
            <div>
              <div class="flexc"  style="margin: 0.1rem 0;">
                <el-select v-model="form.pact_ids" multiple filterable collapse-tags style="width: 100%; margin: 0.1rem 0;" placeholder="请选择协议">
                 <el-option  :label="item.title" :value="item.id.toString()" v-for="item in xieyilist" :key="item.id"> </el-option>
                </el-select>
                <div style="margin: 0 0.2rem; color:rgb(0, 90, 255) ; cursor: pointer;" @click="go('/xieyi')">管理协议</div>

                <div style="margin-right: 10px;">用户端默认勾选</div>
                <div><el-checkbox v-model="form.pact_check"  :true-label="1" :false-label="0"></el-checkbox></div>
                <div>
                  <el-tooltip class="item" effect="dark" content="使用默认勾选后用户下单时无需再点击勾选,此操作不合规,请谨慎使用" placement="top-start">
                      <div><i class="el-icon-question" style="color: rgb(255, 168, 168); margin-left: 10px; font-size: 20px; position: relative; top: 3px;"></i></div>
                  </el-tooltip>
                </div>
              </div>
            </div>
            <div>
              <div style="margin: 0.1rem 0;">商品详情</div>
              <div><fuwenben :content="form.description" @getcontent="getcontent" v-if="relo"></fuwenben></div>
            </div>

            <!-- 商品页专用 -->
            <div v-if="shangpinyeshow">
              <div class="flexc" style="font-size: 16px; font-weight: bold; margin-bottom: 20px; margin-top: 30px;">
                <div><img src="../../../static/img/bianji1.png" style="width: 22px; margin-right: 10px;"></div>
                <div>商品下单信息填写配置</div>
              </div>
              <div class="baibeijing" >
                <div>
                  <div>
                    <div style="margin: 0.1rem 0;">身份证信息填写</div>
                    <div><el-switch v-model="form.need_idcard" @change="changeneed_idcard()" style="width: 46px; height: 21px;" active-color="rgb(0, 90, 255);" inactive-color="rgb(246, 248, 251);" :active-value="1" :inactive-value="0"></el-switch></div>
                  </div>
                </div>

                <div>
                  <div>
                    <div style="margin: 0.1rem 0;">收货人使用身份证姓名</div>
                    <div>
                      <el-switch v-model="form.same_name" :disabled="form.need_idcard == 0" style="width: 46px; height: 21px;" active-color="rgb(0, 90, 255);" inactive-color="rgb(246, 248, 251);" :active-value="1" :inactive-value="0"></el-switch>
                      <span style="color: rgb(175, 179, 188); margin-left: 10px;">提示：开启身份证信息填写后可用</span>
                    </div>
                  </div>
                </div>

                <div>
                  <div>
                    <div  style="margin: 0.1rem 0;">身份证照片上传</div>
                    <div>
                      <el-switch v-model="form.is_need_photo" style="width: 46px; height: 21px;" active-color="rgb(0, 90, 255);" inactive-color="rgb(246, 248, 251);" :active-value="1" :inactive-value="0"></el-switch>
                      <span style="color: rgb(175, 179, 188); margin-left: 10px;">提示：检测到当前选择的商品需要照片</span>
                    </div>

                  </div>
                </div>

                <div>
                  <div>
                    <div style="margin: 0.1rem 0;">提单信息填写展示方式</div>

                    <div class="flexc">
                      <!-- <div class="flexc">
                        <el-radio v-model="form.show_type" :label="0" style="margin-right: 0;">逐渐显示填写信息</el-radio>
                        <div class="flexcc">
                          <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
                              <div><i class="el-icon-question" style="color: rgb(255, 168, 168); margin-left: 10px; font-size: 20px; position: relative; top: 3px;"></i></div>
                          </el-tooltip>
                        </div>
                      </div> -->
                      <div class="flexc">
                        <el-radio v-model="form.show_type" :label="1" style="margin-right: 0;">直接列出全部填写信息</el-radio>
                        <!-- <div class="flexcc">
                          <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
                              <div><i class="el-icon-question" style="color: rgb(255, 168, 168); margin-left: 10px; font-size: 20px; position: relative; top: 3px;"></i></div>
                          </el-tooltip>
                        </div> -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="flexc" style="font-size: 16px; font-weight: bold; margin-bottom: 20px; margin-top: 30px;">
                <div><img src="../../../static/img/bianji1.png" style="width: 22px; margin-right: 10px;"></div>
                <div>用户下单限制设置</div>
              </div>

              <div class="baibeijing" >
                <div>
                  <div>
                    <div style="margin: 0.1rem 0;">下单年龄限制</div>
                    <div>
                      <el-switch v-model="form.age_limit" style="width: 46px; height: 21px;" active-color="rgb(0, 90, 255);" inactive-color="rgb(246, 248, 251);" :active-value="1" :inactive-value="0"></el-switch>
                    </div>
                  </div>
                  <div>
                    <div style="margin: 0.1rem 0;  color: rgb(212, 215, 222);">允许下单的年龄范围</div>
                    <div class="flexc">
                      <div style="width: 2.5rem;"><el-input v-model="form.min_age"  ></el-input></div>
                      <div style="margin: 0 10px;">~</div>
                      <div style="width: 2.5rem;"><el-input v-model="form.max_age" ></el-input></div>
                    </div>

                  </div>
                </div>

                <div style="margin-top: 10px;">
                  <div>
                    <div style=" margin: 0.1rem 0; ">下单数量限制</div>
                    <div><el-switch v-model="form.limit_open" style="width: 46px; height: 21px;" active-color="rgb(0, 90, 255);" inactive-color="rgb(246, 248, 251);" :active-value="1" :inactive-value="0"></el-switch></div>
                  </div>
                  <div>
                    <div class="flexc" style="margin-bottom: 0.2rem;">
                      <div style="margin: 0.1rem 0.1rem 0.1rem 0;">选择限制数量</div>
                      <div>
                        <el-select v-model="form.limit" style="width: 100%;" placeholder="请选择限制数量">
                         <el-option  label="不限制" value="0"> </el-option>
                         <el-option  label="1" value="1"> </el-option>
                         <el-option  label="2" value="2"> </el-option>
                         <el-option  label="3" value="3"> </el-option>
                         <el-option  label="4" value="4"> </el-option>
                         <el-option  label="5" value="5"> </el-option>
                        </el-select>
                      </div>
                    </div>
                    <div class="flexc">
                      <div style="margin: 0.1rem 0.1rem 0.1rem 0;">识别方式选择</div>
                      <div>
                        <el-select v-model="form.limit_type" style="width: 100%;" placeholder="请选识别方式选择">
                          <el-option  label="证件号" :value="0"> </el-option>
                          <el-option  label="手机号" :value="1"> </el-option>
                          <el-option  label="IP地址" :value="2"> </el-option>
                        </el-select>
                      </div>
                    </div>
                  </div>

                  <div style="margin-bottom: 20px;">
                    <div style=" margin: 0.1rem 0; ">不发货地区设置</div>
                    <div>
                      <div class="flexc" style="padding-bottom: 20px;">
                        <!-- <div style="margin-right: 20px;"><el-radio v-model="form.bufahuodiqu" label="2">使用产品的不发货区域</el-radio></div> -->
                        <div style="margin-right: 20px;"><el-radio v-model="form.deliver_type" :label="1">设置不发货区域</el-radio></div>
                        <div><el-radio v-model="form.deliver_type" :label="3">设置只发货区域</el-radio></div>
                      </div>
                      <div style="background: rgb(241, 241, 241); padding-bottom: 20px;" v-if="form.deliver_type == 1">
                        <div style="color: #999; font-size: 12px; padding: 10px 23px;">设置后用户只能选择选中的省市为收货地址</div>
                        <div style="padding-left: 23px;">
                            <el-cascader :options="options" v-model="form.nodeliver_area" style="width: 4rem;" collapse-tags :props="props" clearable>
                            </el-cascader>
                        </div>
                      </div>
                      <div style="background: rgb(241, 241, 241); padding-bottom: 20px;" v-if="form.deliver_type == 3">
                        <div style="color: #999; font-size: 12px; padding: 10px 23px;">设置后用户不能选择选中的省市为收货地址</div>
                        <div style="padding-left: 23px;">
                            <el-cascader ref="test" :options="options" v-model="form.deliver_area" style="width: 4rem;" collapse-tags :props="props" clearable @change="test" >
                            </el-cascader>
                        </div>
                      </div>
                      <div style=" background: rgb(241, 241, 241); padding:0 20px;"  v-if="form.deliver_type == 3">
                        <div class="flexc">
                          <div style="line-height: 32px;">批量上传地址</div>
                          <div style="margin-left: 10px;">
                            <el-upload :show-file-list="false" action="#" :http-request="upup">
                              <el-button type="text">点击上传</el-button>
                            </el-upload>
                          </div>
                          <el-button type="text" @click="down" style="margin-left: 50px;">模板下载</el-button>
                        </div>

                      </div>

                    </div>
                  </div>
                </div>

              </div>

            </div>


            <el-button type="primary" round style="margin: 0.2rem 0;" @click="xiugai">保存</el-button>
          </el-form>
        </div>

      </div>
    </div>
	</div>
</template>

<script>
  import {bufahuodiqu} from '../../assets/bufahuodiqu.js'
  import left from '../left.vue'
  import top from '../top.vue'
  import footers from '../footer.vue'
  import chuantu from '@/components/chuantu.vue'
  import fuwenben from '@/components/fuwenben.vue'
  import topandleft from '../topandleft.vue'
	export default {
		name: 'bianjishangpin',
    components:{
      left,chuantu,fuwenben,top,topandleft,footers
    },
		data() {
			return {
        form:{
          selling_point:[],
          delivery_city:[],
          no_city:[]
        },
        zidong:false,
        loading:true,
        relo:true,
        options:[],
        props: {
          multiple: true
        },
        shangpinyeshow:false,//重要
        xieyilist:[],

        shoujiban:false,
        loading: false,
        finished: false,
			}
		},
		created() {
      this.getxieyi()
		},
		mounted() {
      // add 就是商品页添加新商品  fix是商品页商品修改
      if(this.$route.query.type == "add"){
        //获取要商品详情
        this.getdetail(this.$route.query.page_id)
        this.shangpinyeshow = true

        this.options = bufahuodiqu
      }else{
        if(this.$route.query.type == "fix"){
          this.getdetail(this.$route.query.id)
          this.shangpinyeshow = true
          this.options = bufahuodiqu
        }else{
          //店铺的商品
          this.getdetail(this.$route.query.id)
        }
      }
      if(window.screen.width < 1080){
        this.shoujiban = true
        var h = document.documentElement.clientWidth / 7.5 + 'px';
        document.documentElement.style.fontSize = h;

        // this.onLoad()
      }else{
        
      }
		},
		methods: {
      getxieyi:function(){
        axios.get('/own/network/pact/get').then((response)=>{
        	if (response.data.msg.code == 0) {
            this.xieyilist = response.data.data
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      down:function(){
        const a = document.createElement('a');
        a.setAttribute('download', '只发货省市区上传.xlsx');
        a.setAttribute('href', location.origin + '/hou/static/xlsx/bufahuoshengshiqu.xlsx');
        a.click();
      },
      changeneed_idcard:function(){
        if(this.form.need_idcard == 0){
          this.form.same_name = 0
        }
      },
      upup:function(file){
        var params = new FormData();
        params.append('file',file.file);
        axios.post(`/api/delivery/data`, params)
          .then(response=> {
              if (response.data.msg.code == 0) {
                this.form.deliver_type = '1'
                this.form.deliver_area = response.data.data
              }else{
                  this.$message.error(response.data.msg.info);
              }
          })
      },
      getimg:function(item){
        this.form.image1 = item
      },
      getimg2:function(item){
        this.form.share_img = item
      },
      getcontent:function(item){
        this.form.description = item
      },

      xiugai:function(){
        let all = JSON.parse(JSON.stringify(this.form))
        if(this.form.selling_point.length > 0){
          all.selling_point = JSON.stringify(this.form.selling_point)
        }else{
          all.selling_point = ""
        }
        let url = ""
        if(this.$route.query.type == "add" || this.$route.query.type == "fix"){
          if(this.form.deliver_area.length > 0){
            all.deliver_area = JSON.stringify(this.form.deliver_area)
          }else{
            all.deliver_area = ""
          }
          if(this.form.nodeliver_area.length > 0){
            all.nodeliver_area = JSON.stringify(this.form.nodeliver_area)
          }else{
            all.nodeliver_area = ""
          }
          url = '/own/fpage/make'
          if(this.$route.query.type == "add"){
            all.id = ""
            all.flow_id = this.$route.query.flow_id
            all.page_id = this.$route.query.page_id
          }
          if(this.$route.query.one){
            if(!this.form.page_source){
              this.$message.error('订单来源必填');
              return false
            }
          }
        }else{
          url = '/own/page/update'
        }

        axios.post(url,all).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.$message.success('修改成功');
            this.back()
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },

      getdetail:function(id){

        let url = ""
        if(this.$route.query.type == "fix"){
          url = '/own/fpage/manage'
        }else{
          url = '/own/page/info'
        }
        axios.get(url,{params:{id:id}}).then((response)=>{
        	if (response.data.msg.code == 0) {
            if(response.data.data.selling_point){
              response.data.data.selling_point = JSON.parse(response.data.data.selling_point)
            }else{
              response.data.data.selling_point = []
            }
            if(response.data.data.deliver_area){
              response.data.data.deliver_area = JSON.parse(response.data.data.deliver_area)
            }else{
              response.data.data.deliver_area = []
            }
            if(response.data.data.nodeliver_area){
              response.data.data.nodeliver_area = JSON.parse(response.data.data.nodeliver_area)
            }else{
              response.data.data.nodeliver_area = []
            }
            if(this.$route.query.type == "add"){
              response.data.data.sale_name = response.data.data.title
              response.data.data.need_idcard = 1

              if(response.data.data.show_type == undefined){
                response.data.data.show_type = 1
              }
            }

            this.form = response.data.data




            this.relo = false
            this.$nextTick(()=>{
              this.relo = true
            })

            this.loading = false
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
		}
	}
</script>


<style scoped lang="less">
  .bianjishangpin{
    .sxjact{background: rgb(0, 90, 255); border-radius:30px; font-size: 24px; text-align: center; font-weight: 500; color: rgb(255, 255, 255); width: 150px; height: 60px; margin-right: 30px; }
    .sxj{background: rgb(227, 232, 241); border-radius:30px; font-size: 24px; text-align: center; font-weight: 500; color: rgb(175, 179, 188); width: 150px; height: 60px; margin-right: 30px; }
    .xt{width: 72px;height: 26px; margin-right: 10px; border-radius: 5px; font-size: 12px;}
    .lj{width: 100px; height: 32px; color: rgb(64, 66, 71); background: rgb(227, 232, 241); border-radius: 16px; margin-right: 20px; font-size: 14px; cursor: pointer;}
    .ljact{width: 100px; height: 32px; color: rgb(0, 90, 255); background: rgb(228, 237, 255); border-radius: 16px; margin-right: 20px; font-size: 14px; cursor: pointer;}
    /deep/ .el-form-item{ margin-bottom: 0;}

    /deep/ .el-switch__core{ width: 46px !important; height: 21px; border-radius: 20px; background: rgb(246, 248, 251); border: 1px solid rgb(227, 232, 241);}
    /deep/ .el-switch.is-checked .el-switch__core {
        border-color: rgb(0, 90, 255) !important;
        background-color: rgb(0, 90, 255) !important;
    }
    /deep/ .el-switch.is-checked .el-switch__core::after{margin-left: -18px; left: 100% !important;}
    /deep/ .el-switch__core:after{ width: 17px; height: 17px;  top: 1px; left: 1px; background: rgb(227, 232, 241);}

    /deep/ .el-cascader{ width: 300px;}
  }

</style>
